// pages/work11/index.js
const utils=require('utils')
let fmarkers = []  //用来储存地图数据的全局变量
let timer = 0 
Page({
data:{
  meters:0,  //里程数
  seconds:0, //时间
  latitude:0, //纬度
  longitude:0,  //经度
  running:false,  //是否开始记录
  interval:1000, //获取当前坐标的时间间隔（毫秒）
  markers:[], //储存地图数据的数组
  polyline:[{   //回放时描绘坐标线用到的数组数据
    points:[], //储存坐标
    color:'#0099CC', //描绘线的颜色
    borderColor:'#0099CC', //描绘线边框颜色
    borderWidth:5,  //边框大小
    width:12 //描绘线宽度
  }],  
  feedbackrate:50  //回放的时间间隔（毫秒） 这里调为20倍速
},
curLocation(){   //获取坐标
  wx.getLocation({
    type:'gcj02'
  }).then(res=>{
    console.log(res);
    let {latitude,longitude}=res
    this.setData({
      latitude:latitude,
      longitude:longitude
    })
  })
},
onLoad(){  //初始化页面调用获取坐标的函数 curLocation
  this.curLocation()
  setInterval(this.record,this.data.interval)
},
test(){    //测试按钮test用的
  let dis=utils.getDistance(this.data.latitude,this.data.longitude,newMarker.latitude,newMarker.longitude)
  this.setData({
    meters:dis
  })
},
run(){  //判断是否在记录
  this.setData({
    running:!this.data.running
  })
},
record(){ 
  if(!this.data.running){
    return 
  }
  this.setData({   //计算时间
    seconds:this.data.seconds + this.data.interval/1000
  })
  wx.getLocation({
    type: 'gcj02',
  }).then(res=>{
    let newMarker = {   //将现有的数据都放入这个数组 
      latitude:res.latitude,
      longitude:res.longitude,
      iconPath:'redPoint.png',
      width:10,
      height:10,
      meters:this.data.meters,
      seconds:this.data.seconds
    }
    let pace = 0  //声明计算历程要到的变量
    let markers = this.data.markers  //声明markers数组
    if(this.data.markers.length>0){   //markers数组有数据就开始运算
      let lastmarker = this.data.markers.slice(-1) [0]
      console.log(lastmarker)
      console.log(newMarker)
      pace = utils.getDistance(lastmarker.latitude,lastmarker.longitude,
        newMarker.latitude,newMarker.longitude)
      if(pace>15){
        markers.push(newMarker)
      }else{
        pace=10
      }
    }else{
      markers.push(newMarker)
    }
    this.setData({
        latitude:res.latitude,
        longitude:res.longitude,
        markers:markers,
        meters:this.data.meters + pace
    })
  })
  this.setMarkers();   //调用这个数组更新获取的meters历程数和seconds时间
},
setMarkers(){
  if(this.data.markers.length>0) {
  let index = (this.data.markers.length)-1
  console.log(index);  //替换为最新的历程数和时间
  let setMeters = 'markers['+index+'].meters'
  let setSeconds = 'markers['+index+'].seconds'
  this.setData({   
    [setMeters]:this.data.meters,
    [setSeconds]:this.data.seconds
  })
}
},
clear(){  //清除数据 将页面都还原
  this.setData({
    markers:[],
    meters:0,
    seconds:0,
    markers:[],
    polyline:[{
      points:[],
      color:'#0099CC',
      borderColor:'#0099CC',
      borderWidth:5, 
      width:12
    }],
    interval:1000
  })
},
save(){  //将markers数组保存
  wx.setStorage({
    data:this.data.markers,
    key:'running',
  }).then(()=>{
    wx.showToast({
      title: '保存成功',
    })
  })
},
playback(){  //取出储存的markers数组
  this.clear()
  wx.getStorage({
    key:'running',
  }).then(res=>{
      fmarkers = res.data
  })
                    //  //调用feedback函数
  timer = setInterval(this.feedback,this.data.feedbackrate)
},
feedback(){  
  //逐个取出储存的的数据实现 逐个点的回放描绘线
  let lmarkers = this.data.markers
  let lpolyline = this.data.polyline
  if(fmarkers.length>0){
    lmarkers.push(fmarkers.shift())  //将储存的数组逐个提出来
    lpolyline[0].points = lmarkers
  }else{
    clearInterval(timer)
  }
  console.log(lmarkers)
  this.setData({  //传回data 
    markers:lmarkers,
    polyline:lpolyline,
    meters:lmarkers[lmarkers.length-1].meters,
    seconds:lmarkers[lmarkers.length-1].seconds
  })
}
})